<template>
  <div id="app">
    
    <div class="top">
      <!-- 路由出口 -->
      <router-view></router-view>
    </div>
    <div class="nav">
      <!-- vue-router (router-link) 取代a标签 -->
      <!-- 声明式导航-导航链接 -->
      <router-link class="nav-item" active-class="active" to="/find">发现音乐</router-link>
      <br>
      <router-link active-class="active" to="/my">我的音乐</router-link>
      <br>
      <router-link active-class="active" to="/friend">我的盆友</router-link>
      <!-- <a href="#/find">发现音乐</a> |  -->
      <!-- <a href="#/my">我的音乐</a> |  -->
      <!-- <a href="#/friend">盆友</a> -->
    </div>
  </div>
</template>

<script>

/**
 * 路由
 * 单页应用 : 一个html/按需更新,性能高/开发效率高/用户体验非常好/学习成本(高)/首屏加载慢/SEO差
 * 多页       多个        整页更新     中心         一般        中等         快     优
 * 
 * 系统类的/内部网站/文档类/移动端
 */

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
.active {
  background-color: pink;
}
.nav-item {
  background-color: yellowgreen;
}

</style>
